<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">商城管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">供应商信息</li>
    </ol>
</nav>

<!-- 新增供应商的模态框 -->
<div class="modal fade" id="modal-insert" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-insert-h5">新增供应商</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-insert" class="row g-3">
                    <div class="col-md-4">
                        <label for="insert-code" class="form-label ">账号</label>
                        <input required name="code" type="text" class="form-control" id="insert-code" placeholder="请输入账号">
                    </div>

                    <div class="col-md-4">
                        <label for="insert-name" class="form-label">名称</label>
                        <input required name="name" type="text" class="form-control" id="insert-name" placeholder="请输入供应商名称">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 用户名不能为空
                        </div>
                    </div>

                    <div class="col-md-5">
                        <label for="insert-address" class="form-label">地区</label>
                        <input required name="address" type="text" class="form-control" id="insert-address" placeholder="请输入地区">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 描述不能为空
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="insert-contact" class="form-label">联系人</label>
                        <input required name="contact" type="text" class="form-control" id="insert-contact" placeholder="请输入联系人">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="insert-contact-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label for="insert-tel" class="form-label">联系方式</label>
                        <input required name="tel" type="text" class="form-control" id="insert-tel" placeholder="请输入联系方式">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="insert-tel-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="insert-detail" class="form-label">描述</label>
                        <textarea required name="detail" type="text" class="form-control" id="insert-detail" placeholder="请输入供应商描述"></textarea>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="insert-detail-fail" class="invalid-feedback">
                            提示: 详细地区不能为空
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-insert-sure" type="button" class="btn btn-primary" onclick="insertProvider()">新增</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看供应商的模态框-->
<div class="modal fade" id="modal-show" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-show-h5">查看供应商信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-show" class="row g-3">
                    <div class="col-md-4">
                        <label for="show-id" class="form-label ">ID</label>
                        <input name="id" readonly type="text" class="form-control" id="show-id">

                    </div>
                    <div class="col-md-4">
                        <label for="show-code" class="form-label ">账号</label>
                        <input name="code" readonly type="text" class="form-control" id="show-code">
                    </div>

                    <div class="col-md-4">
                        <label for="show-name" class="form-label">名称</label>
                        <input name="name" readonly type="text" class="form-control" id="show-name" placeholder="">
                    </div>

                    <div class="col-md-5">
                        <label for="show-address" class="form-label">地区</label>
                        <input name="address" readonly type="text" class="form-control" id="show-address">
                    </div>
                    <div class="col-md-3">
                        <label for="show-contact" class="form-label">联系人</label>
                        <input name="contact" readonly type="text" class="form-control" id="show-contact">
                    </div>

                    <div class="col-md-4">
                        <label for="show-tel" class="form-label">联系方式</label>
                        <input name="tel" readonly type="text" class="form-control" id="show-tel">
                    </div>
                    <div class="col-12">
                        <label for="edit-detail" class="form-label">描述</label>
                        <textarea readonly name="detail" type="text" class="form-control" id="show-detail" placeholder=""></textarea>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!--修改基本信息的模态框-->
<div class="modal fade" id="modal-base" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-base-h5">编辑供应商信息</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-edit" class="row g-3">
                    <div class="col-md-4">
                        <label for="ms-form-user-base-code" class="form-label ">ID</label>
                        <input name="id" readonly type="text" class="form-control is-valid" id="ms-form-user-base-id">
                        <div class="valid-feedback">
                            提示: ID 不可更改
                        </div>
                    </div>
                    <div class="col-md-4">
                        <label for="ms-form-user-base-code" class="form-label ">账号</label>
                        <input name="code" readonly type="text" class="form-control is-valid" id="ms-form-user-base-code">
                        <div class="valid-feedback">
                            提示: 账号不可更改
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label for="ms-form-user-base-username" class="form-label">名称</label>
                        <input name="name" type="text" class="form-control" id="ms-form-user-base-username" placeholder="">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-username-fail" class="invalid-feedback">
                            提示: 用户名不能为空
                        </div>
                    </div>

                    <div class="col-md-5">
                        <label for="ms-form-user-base-tel" class="form-label">地区</label>
                        <input name="address" type="text" class="form-control" id="ms-form-user-base-tel">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-tel-fail" class="invalid-feedback">
                            提示: 描述不能为空
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label for="ms-form-user-base-tel" class="form-label">联系人</label>
                        <input name="contact" type="text" class="form-control" id="ms-form-user-base-email">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="ms-form-user-base-email-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>

                    <div class="col-md-4">
                        <label for="ms-form-user-base-tel" class="form-label">联系方式</label>
                        <input name="tel" type="text" class="form-control" id="edit-tel">
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="edit-tel-fail" class="invalid-feedback">
                            提示: 联系方式不能为空
                        </div>
                    </div>
                    <div class="col-12">
                        <label for="edit-detail" class="form-label">描述</label>
                        <textarea name="detail" type="text" class="form-control" id="edit-detail" placeholder=""></textarea>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div id="edit-detail-fail" class="invalid-feedback">
                            提示: 详细地区不能为空
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-sure" type="button" class="btn btn-primary" onclick="saveEdit()">保存</button>
            </div>
        </div>
    </div>
</div>

<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <div class="input-group mb-3 w-50">
        <input id="input-search" type="text" class="form-control" placeholder="根据供应商名称查询">
        <button class="btn btn-primary" type="button" id="btn-search" onclick="searchProvider(this)">搜索</button>
    </div>
    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-primary ml-auto" onclick="renderModalInsert()" data-bs-toggle="modal" data-bs-target="#modal-insert">新增</button>
        <button class="btn btn-danger ml-auto" onclick="removeProviders()">批量删除</button>
    </div>
    <h6 id="textShowResult" class="text-dark">共0条结果</h6>
    <table class="table table-bordered text-center">
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 5%;">ID</td>
            <td style="width: 6%;">账号</td>
            <td style="width: 6%;">名称</td>
            <td style="width: 10%;">描述</td>
            <td style="width: 8%;">联系人</td>
            <td style="width: 8%;">联系电话</td>
            <td style="width: 12%;">地址</td>
            <td style="width: 15%;">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-provider-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-provider-pages-entry" class="Page navigation mb-0"></nav>